    <div class="item" >
        <img src="http://wlog.cn/demo/waterfall/images/001.jpg" width="192" height="288">
        <div class="introduce">
            <div class="one-line">
                <div class="one-line-left"><p>这是名字</p></div>
                <div class="one-line-right"><span>￥999</span></div>
            </div>
            <div class="two-line">
                <span>这是介绍description rsytseyestyetureturetuijreiwrutyuerueryureyretyertyretyreyrtytryetuertuwruthfgjdjdfj</span>
            </div>
            <div class="three-line">
                <a href="">
                    <div class="user-block">
                        <div class="user">
                            <img style="border-radius: 50%;" src="./image/user.jpg">
                        </div>
                    </div>
                    <div class="user-introduction">
                        <div class="user-name">作者Emily Finley</div>
                        <div class="user-skill">描述draw and design</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- hover -->
        <div class="hide">
            <div class="hide-left">
                <a href=""><div class="like">
                    <img src="./image/heart.png">
                </div></a>
                <a href=""><div class="collect">
                    <img src="./image/star.png">
                </div></a>
            </div> 
            <a href=""><div class="hide-right">
                <img src="./image/shop.png">
            </div></a>   
        </div>
    </div>

    <div class="item" >
        <img src="http://wlog.cn/demo/waterfall/images/002.jpg" width="192" height="257">
        <div class="introduce">
            <div class="one-line">
                <div class="one-line-left"><p>introduction</p></div>
                <div class="one-line-right"><span>￥999</span></div>
            </div>
            <div class="two-line">
                <span>description</span>
            </div>
            <div class="three-line">
                <a href="">
                    <div class="user-block">
                        <div class="user">
                            <img style="border-radius: 50%;" src="./image/user.jpg">
                        </div>
                    </div>
                    <div class="user-introduction">
                        <div class="user-name">Emily Finley</div>
                        <div class="user-skill">draw and design</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- hover -->
        <div class="hide">
            <div class="hide-left">
                <a href=""><div class="like">
                    <img src="./image/heart.png">
                </div></a>
                <a href=""><div class="collect">
                    <img src="./image/star.png">
                </div></a>
            </div> 
            <a href=""><div class="hide-right">
                <img src="./image/shop.png">
            </div></a>   
        </div>
    </div>

    <div class="item">
        <img src="http://wlog.cn/demo/waterfall/images/003.jpg" width="192" height="288">
        <div class="introduce">
            <div class="one-line">
                <div class="one-line-left"><p>introduction</p></div>
                <div class="one-line-right"><span>￥999</span></div>
            </div>
            <div class="two-line">
                <span>description</span>
            </div>
            <div class="three-line">
                <a href="">
                    <div class="user-block">
                        <div class="user">
                            <img style="border-radius: 50%;" src="./image/user.jpg">
                        </div>
                    </div>
                    <div class="user-introduction">
                        <div class="user-name">Emily Finley</div>
                        <div class="user-skill">draw and design</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- hover -->
        <div class="hide">
            <div class="hide-left">
                <a href=""><div class="like">
                    <img src="./image/heart.png">
                </div></a>
                <a href=""><div class="collect">
                    <img src="./image/star.png">
                </div></a>
            </div> 
            <a href=""><div class="hide-right">
                <img src="./image/shop.png">
            </div></a>   
        </div>
    </div>

    <div class="item">
        <img src="http://wlog.cn/demo/waterfall/images/004.jpg" width="192" height="288">
        <div class="introduce">
            <div class="one-line">
                <div class="one-line-left"><p>introduction</p></div>
                <div class="one-line-right"><span>￥999</span></div>
            </div>
            <div class="two-line">
                <span>description</span>
            </div>
            <div class="three-line">
                <a href="">
                    <div class="user-block">
                        <div class="user">
                            <img style="border-radius: 50%;" src="./image/user.jpg">
                        </div>
                    </div>
                    <div class="user-introduction">
                        <div class="user-name">Emily Finley</div>
                        <div class="user-skill">draw and design</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- hover -->
        <div class="hide">
            <div class="hide-left">
                <a href=""><div class="like">
                    <img src="./image/heart.png">
                </div></a>
                <a href=""><div class="collect">
                    <img src="./image/star.png">
                </div></a>
            </div> 
            <a href=""><div class="hide-right">
                <img src="./image/shop.png">
            </div></a>   
        </div>
    </div>

    <div class="item">
        <img src="http://wlog.cn/demo/waterfall/images/005.jpg" width="192" height="248">
        <div class="introduce">
            <div class="one-line">
                <div class="one-line-left"><p>introduction</p></div>
                <div class="one-line-right"><span>￥999</span></div>
            </div>
            <div class="two-line">
                <span>description</span>
            </div>
            <div class="three-line">
                <a href="">
                    <div class="user-block">
                        <div class="user">
                            <img style="border-radius: 50%;" src="./image/user.jpg">
                        </div>
                    </div>
                    <div class="user-introduction">
                        <div class="user-name">Emily Finley</div>
                        <div class="user-skill">draw and design</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- hover -->
        <div class="hide">
            <div class="hide-left">
                <a href=""><div class="like">
                    <img src="./image/heart.png">
                </div></a>
                <a href=""><div class="collect">
                    <img src="./image/star.png">
                </div></a>
            </div> 
            <a href=""><div class="hide-right">
                <img src="./image/shop.png">
            </div></a>   
        </div>
    </div>

    <div class="item">
        <img src="http://wlog.cn/demo/waterfall/images/006.jpg" width="192" height="288">
        <div class="introduce">
            <div class="one-line">
                <div class="one-line-left"><p>introduction</p></div>
                <div class="one-line-right"><span>￥999</span></div>
            </div>
            <div class="two-line">
                <span>description</span>
            </div>
            <div class="three-line">
                <a href="">
                    <div class="user-block">
                        <div class="user">
                            <img style="border-radius: 50%;" src="./image/user.jpg">
                        </div>
                    </div>
                    <div class="user-introduction">
                        <div class="user-name">Emily Finley</div>
                        <div class="user-skill">draw and design</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- hover -->
        <div class="hide">
            <div class="hide-left">
                <a href=""><div class="like">
                    <img src="./image/heart.png">
                </div></a>
                <a href=""><div class="collect">
                    <img src="./image/star.png">
                </div></a>
            </div> 
            <a href=""><div class="hide-right">
                <img src="./image/shop.png">
            </div></a>   
        </div>
    </div>

    <div class="item">
        <img src="http://wlog.cn/demo/waterfall/images/007.jpg" width="192" height="288">
        <div class="introduce">
            <div class="one-line">
                <div class="one-line-left"><p>introduction</p></div>
                <div class="one-line-right"><span>￥999</span></div>
            </div>
            <div class="two-line">
                <span>description</span>
            </div>
            <div class="three-line">
                <a href="">
                    <div class="user-block">
                        <div class="user">
                            <img style="border-radius: 50%;" src="./image/user.jpg">
                        </div>
                    </div>
                    <div class="user-introduction">
                        <div class="user-name">Emily Finley</div>
                        <div class="user-skill">draw and design</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- hover -->
        <div class="hide">
            <div class="hide-left">
                <a href=""><div class="like">
                    <img src="./image/heart.png">
                </div></a>
                <a href=""><div class="collect">
                    <img src="./image/star.png">
                </div></a>
            </div> 
            <a href=""><div class="hide-right">
                <img src="./image/shop.png">
            </div></a>   
        </div>
    </div>

    <div class="item">
        <img src="http://wlog.cn/demo/waterfall/images/008.jpg" width="192" height="290">
        <div class="introduce">
            <div class="one-line">
                <div class="one-line-left"><p>introduction</p></div>
                <div class="one-line-right"><span>￥999</span></div>
            </div>
            <div class="two-line">
                <span>description</span>
            </div>
            <div class="three-line">
                <a href="">
                    <div class="user-block">
                        <div class="user">
                            <img style="border-radius: 50%;" src="./image/user.jpg">
                        </div>
                    </div>
                    <div class="user-introduction">
                        <div class="user-name">Emily Finley</div>
                        <div class="user-skill">draw and design</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- hover -->
        <div class="hide">
            <div class="hide-left">
                <a href=""><div class="like">
                    <img src="./image/heart.png">
                </div></a>
                <a href=""><div class="collect">
                    <img src="./image/star.png">
                </div></a>
            </div> 
            <a href=""><div class="hide-right">
                <img src="./image/shop.png">
            </div></a>   
        </div>
    </div>

    <div class="item">
        <img src="http://wlog.cn/demo/waterfall/images/009.jpg" width="192" height="240">
        <div class="introduce">
            <div class="one-line">
                <div class="one-line-left"><p>introduction</p></div>
                <div class="one-line-right"><span>￥999</span></div>
            </div>
            <div class="two-line">
                <span>description</span>
            </div>
            <div class="three-line">
                <a href="">
                    <div class="user-block">
                        <div class="user">
                            <img style="border-radius: 50%;" src="./image/user.jpg">
                        </div>
                    </div>
                    <div class="user-introduction">
                        <div class="user-name">Emily Finley</div>
                        <div class="user-skill">draw and design</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- hover -->
        <div class="hide">
            <div class="hide-left">
                <a href=""><div class="like">
                    <img src="./image/heart.png">
                </div></a>
                <a href=""><div class="collect">
                    <img src="./image/star.png">
                </div></a>
            </div> 
            <a href=""><div class="hide-right">
                <img src="./image/shop.png">
            </div></a>   
        </div>
    </div>

    <div class="item">
        <img src="http://wlog.cn/demo/waterfall/images/010.jpg" width="192" height="228">
        <div class="introduce">
            <div class="one-line">
                <div class="one-line-left"><p>introduction</p></div>
                <div class="one-line-right"><span>￥999</span></div>
            </div>
            <div class="two-line">
                <span>description</span>
            </div>
            <div class="three-line">
                <a href="">
                    <div class="user-block">
                        <div class="user">
                            <img style="border-radius: 50%;" src="./image/user.jpg">
                        </div>
                    </div>
                    <div class="user-introduction">
                        <div class="user-name">Emily Finley</div>
                        <div class="user-skill">draw and design</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- hover -->
        <div class="hide">
            <div class="hide-left">
                <a href=""><div class="like">
                    <img src="./image/heart.png">
                </div></a>
                <a href=""><div class="collect">
                    <img src="./image/star.png">
                </div></a>
            </div> 
            <a href=""><div class="hide-right">
                <img src="./image/shop.png">
            </div></a>   
        </div>
    </div>

    <div class="item">
        <img src="http://wlog.cn/demo/waterfall/images/011.jpg" width="192" height="128">
        <div class="introduce">
            <div class="one-line">
                <div class="one-line-left"><p>introduction</p></div>
                <div class="one-line-right"><span>￥999</span></div>
            </div>
            <div class="two-line">
                <span>description</span>
            </div>
            <div class="three-line">
                <a href="">
                    <div class="user-block">
                        <div class="user">
                            <img style="border-radius: 50%;" src="./image/user.jpg">
                        </div>
                    </div>
                    <div class="user-introduction">
                        <div class="user-name">Emily Finley</div>
                        <div class="user-skill">draw and design</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- hover -->
        <div class="hide">
            <div class="hide-left">
                <a href=""><div class="like">
                    <img src="./image/heart.png">
                </div></a>
                <a href=""><div class="collect">
                    <img src="./image/star.png">
                </div></a>
            </div> 
            <a href=""><div class="hide-right">
                <img src="./image/shop.png">
            </div></a>   
        </div>
    </div>

    <div class="item">
        <img src="http://wlog.cn/demo/waterfall/images/012.jpg" width="192" height="128">
        <div class="introduce">
            <div class="one-line">
                <div class="one-line-left"><p>introduction</p></div>
                <div class="one-line-right"><span>￥999</span></div>
            </div>
            <div class="two-line">
                <span>description</span>
            </div>
            <div class="three-line">
                <a href="">
                    <div class="user-block">
                        <div class="user">
                            <img style="border-radius: 50%;" src="./image/user.jpg">
                        </div>
                    </div>
                    <div class="user-introduction">
                        <div class="user-name">Emily Finley</div>
                        <div class="user-skill">draw and design</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- hover -->
        <div class="hide">
            <div class="hide-left">
                <a href=""><div class="like">
                    <img src="./image/heart.png">
                </div></a>
                <a href=""><div class="collect">
                    <img src="./image/star.png">
                </div></a>
            </div> 
            <a href=""><div class="hide-right">
                <img src="./image/shop.png">
            </div></a>   
        </div>
    </div>

    <div class="item">
        <img src="http://wlog.cn/demo/waterfall/images/013.jpg" width="192" height="128">
        <div class="introduce">
            <div class="one-line">
                <div class="one-line-left"><p>introduction</p></div>
                <div class="one-line-right"><span>￥999</span></div>
            </div>
            <div class="two-line">
                <span>description</span>
            </div>
            <div class="three-line">
                <a href="">
                    <div class="user-block">
                        <div class="user">
                            <img style="border-radius: 50%;" src="./image/user.jpg">
                        </div>
                    </div>
                    <div class="user-introduction">
                        <div class="user-name">Emily Finley</div>
                        <div class="user-skill">draw and design</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- hover -->
        <div class="hide">
            <div class="hide-left">
                <a href=""><div class="like">
                    <img src="./image/heart.png">
                </div></a>
                <a href=""><div class="collect">
                    <img src="./image/star.png">
                </div></a>
            </div> 
            <a href=""><div class="hide-right">
                <img src="./image/shop.png">
            </div></a>   
        </div>
    </div>

    <div class="item">
        <img src="http://wlog.cn/demo/waterfall/images/014.jpg" width="192" height="128">
        <div class="introduce">
            <div class="one-line">
                <div class="one-line-left"><p>introduction</p></div>
                <div class="one-line-right"><span>￥999</span></div>
            </div>
            <div class="two-line">
                <span>description</span>
            </div>
            <div class="three-line">
                <a href="">
                    <div class="user-block">
                        <div class="user">
                            <img style="border-radius: 50%;" src="./image/user.jpg">
                        </div>
                    </div>
                    <div class="user-introduction">
                        <div class="user-name">Emily Finley</div>
                        <div class="user-skill">draw and design</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- hover -->
        <div class="hide">
            <div class="hide-left">
                <a href=""><div class="like">
                    <img src="./image/heart.png">
                </div></a>
                <a href=""><div class="collect">
                    <img src="./image/star.png">
                </div></a>
            </div> 
            <a href=""><div class="hide-right">
                <img src="./image/shop.png">
            </div></a>   
        </div>
    </div>

    <div class="item">
        <img src="http://wlog.cn/demo/waterfall/images/015.jpg" width="192" height="128">
        <div class="introduce">
            <div class="one-line">
                <div class="one-line-left"><p>introduction</p></div>
                <div class="one-line-right"><span>￥999</span></div>
            </div>
            <div class="two-line">
                <span>description</span>
            </div>
            <div class="three-line">
                <a href="">
                    <div class="user-block">
                        <div class="user">
                            <img style="border-radius: 50%;" src="./image/user.jpg">
                        </div>
                    </div>
                    <div class="user-introduction">
                        <div class="user-name">Emily Finley</div>
                        <div class="user-skill">draw and design</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- hover -->
        <div class="hide">
            <div class="hide-left">
                <a href=""><div class="like">
                    <img src="./image/heart.png">
                </div></a>
                <a href=""><div class="collect">
                    <img src="./image/star.png">
                </div></a>
            </div> 
            <a href=""><div class="hide-right">
                <img src="./image/shop.png">
            </div></a>   
        </div>
    </div>

    <div class="item">
        <img src="http://wlog.cn/demo/waterfall/images/016.jpg" width="192" height="256">
        <div class="introduce">
            <div class="one-line">
                <div class="one-line-left"><p>introduction</p></div>
                <div class="one-line-right"><span>￥999</span></div>
            </div>
            <div class="two-line">
                <span>description</span>
            </div>
            <div class="three-line">
                <a href="">
                    <div class="user-block">
                        <div class="user">
                            <img style="border-radius: 50%;" src="./image/user.jpg">
                        </div>
                    </div>
                    <div class="user-introduction">
                        <div class="user-name">Emily Finley</div>
                        <div class="user-skill">draw and design</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- hover -->
        <div class="hide">
            <div class="hide-left">
                <a href=""><div class="like">
                    <img src="./image/heart.png">
                </div></a>
                <a href=""><div class="collect">
                    <img src="./image/star.png">
                </div></a>
            </div> 
            <a href=""><div class="hide-right">
                <img src="./image/shop.png">
            </div></a>   
        </div>
    </div>

    <div class="item">
        <img src="http://wlog.cn/demo/waterfall/images/017.jpg" width="192" height="287">
        <div class="introduce">
            <div class="one-line">
                <div class="one-line-left"><p>introduction</p></div>
                <div class="one-line-right"><span>￥999</span></div>
            </div>
            <div class="two-line">
                <span>description</span>
            </div>
            <div class="three-line">
                <a href="">
                    <div class="user-block">
                        <div class="user">
                            <img style="border-radius: 50%;" src="./image/user.jpg">
                        </div>
                    </div>
                    <div class="user-introduction">
                        <div class="user-name">Emily Finley</div>
                        <div class="user-skill">draw and design</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- hover -->
        <div class="hide">
            <div class="hide-left">
                <a href=""><div class="like">
                    <img src="./image/heart.png">
                </div></a>
                <a href=""><div class="collect">
                    <img src="./image/star.png">
                </div></a>
            </div> 
            <a href=""><div class="hide-right">
                <img src="./image/shop.png">
            </div></a>   
        </div>
    </div>

    <div class="item">
        <img src="http://wlog.cn/demo/waterfall/images/018.jpg" width="192" height="288">
        <div class="introduce">
            <div class="one-line">
                <div class="one-line-left"><p>introduction</p></div>
                <div class="one-line-right"><span>￥999</span></div>
            </div>
            <div class="two-line">
                <span>description</span>
            </div>
            <div class="three-line">
                <a href="">
                    <div class="user-block">
                        <div class="user">
                            <img style="border-radius: 50%;" src="./image/user.jpg">
                        </div>
                    </div>
                    <div class="user-introduction">
                        <div class="user-name">Emily Finley</div>
                        <div class="user-skill">draw and design</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- hover -->
        <div class="hide">
            <div class="hide-left">
                <a href=""><div class="like">
                    <img src="./image/heart.png">
                </div></a>
                <a href=""><div class="collect">
                    <img src="./image/star.png">
                </div></a>
            </div> 
            <a href=""><div class="hide-right">
                <img src="./image/shop.png">
            </div></a>   
        </div>
    </div>

    <div class="item">
        <img src="http://wlog.cn/demo/waterfall/images/019.jpg" width="192" height="192">
        <div class="introduce">
            <div class="one-line">
                <div class="one-line-left"><p>introduction</p></div>
                <div class="one-line-right"><span>￥999</span></div>
            </div>
            <div class="two-line">
                <span>description</span>
            </div>
            <div class="three-line">
                <a href="">
                    <div class="user-block">
                        <div class="user">
                            <img style="border-radius: 50%;" src="./image/user.jpg">
                        </div>
                    </div>
                    <div class="user-introduction">
                        <div class="user-name">Emily Finley</div>
                        <div class="user-skill">draw and design</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- hover -->
        <div class="hide">
            <div class="hide-left">
                <a href=""><div class="like">
                    <img src="./image/heart.png">
                </div></a>
                <a href=""><div class="collect">
                    <img src="./image/star.png">
                </div></a>
            </div> 
            <a href=""><div class="hide-right">
                <img src="./image/shop.png">
            </div></a>   
        </div>
    </div>

    <div class="item">
        <img src="http://wlog.cn/demo/waterfall/images/020.jpg" width="192" height="288">
        <div class="introduce">
            <div class="one-line">
                <div class="one-line-left"><p>introduction</p></div>
                <div class="one-line-right"><span>￥999</span></div>
            </div>
            <div class="two-line">
                <span>description</span>
            </div>
            <div class="three-line">
                <a href="">
                    <div class="user-block">
                        <div class="user">
                            <img style="border-radius: 50%;" src="./image/user.jpg">
                        </div>
                    </div>
                    <div class="user-introduction">
                        <div class="user-name">Emily Finley</div>
                        <div class="user-skill">draw and design</div>
                    </div>
                </a>
            </div>
        </div>
        <!-- hover -->
        <div class="hide">
            <div class="hide-left">
                <a href=""><div class="like">
                    <img src="./image/heart.png">
                </div></a>
                <a href=""><div class="collect">
                    <img src="./image/star.png">
                </div></a>
            </div> 
            <a href=""><div class="hide-right">
                <img src="./image/shop.png">
            </div></a>   
        </div>
    </div></div>